<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>Mua~亲亲宠——宠物交易领养信息平台</title>

<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap theme -->
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>

<body>
	<%@ include file="/WEB-INF/jsp/top.jspf"%>
	<%@ include file="/WEB-INF/jsp/search.jspf"%>
	<div id="condition_search" class="panel panel-info">
		<div class="panel-heading" data-toggle="collapse"
			data-target="#condition_body">
			<h3 class="panel-title">筛选条件</h3>
		</div>
		<div class="panel-body collapse" id="condition_body">
			<form class="form-horizontal" id="conditions_form">
				<input type="hidden" name="title" class="form-control"
					value="${title}" />
				<div class="form-group">
					<label class="col-sm-3 control-label">类别：</label>
					<div class="col-sm-8 pet_type">
						<label class="radio-inline"> <input type="radio"
							name="type" value="0" checked onclick="loadVarietys()">
							不限 </label> <label class="radio-inline"> <input type="radio"
							name="type" value="1" onclick="loadVarietys()"> 猫 </label> <label
							class="radio-inline"> <input type="radio" name="type"
							value="2" onclick="loadVarietys()"> 狗 </label>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">品种：</label>
					<div class="col-sm-8" id="pet_varietys"></div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">性别：</label>
					<div class="col-sm-8">
						<label class="radio-inline"> <input type="radio"
							name="sex" value="0" checked> 不限 </label> <label
							class="radio-inline"> <input type="radio" name="sex"
							value="1"> 公 </label> <label class="radio-inline"> <input
							type="radio" name="sex" value="2"> 母 </label>
					</div>
				</div>
				<div class="form-group form-inline">
					<label class="col-sm-3 control-label">价格区间：</label>
					<div class="col-sm-8">
						<span><input type="text" name="lowPrice" id="lowPrice"
							class="form-control" size="4" />&nbsp;—&nbsp;<input type="text"
							name="highPrice" id="highPrice" class="form-control" size="4" />&nbsp;元</span>
					</div>
				</div>
				<div class="col-sm-offset-5 col-sm-2">
					<button type="button" class="btn btn-info"
						onclick="changeConditions()">筛选</button>
				</div>
				<input type="hidden" name="pageIndex" id="pageIndex"> <input
					type="hidden" name="numIndex" id="numIndex">
			</form>
		</div>
	</div>
	<div id="pet_list" class="row col-sm-offset-1 col-sm-10"></div>

	<div class="col-sm-offset-5 col-sm-2">
		<input type="hidden" id="totalNum" value="0">
		<ul class="pagination pagination-lg">
			<li><a href="javascript:void(0);" onclick="prePage()">&laquo;</a>
			</li>
			<li class='active'><a id="nowPage">1</a></li>
			<li><a href="javascript:void(0);" onclick="nextPage()">&raquo;</a>
			</li>
		</ul>
	</div>

	<script type="text/javascript">
		$(document).ready(function() {
			loadVarietys();
			$('#pageIndex').val('1');
			$('#numIndex').val('8');
			search();
		});
		function loadVarietys() {
			var type = $("#condition_search input[name='type']:checked ").val();
			$
					.ajax({
						url : "pet/listVarietysByType.do",
						data : {
							type : type
						},
						success : function(result) {
							console.log(result);
							if (result.msg == 'success') {
								var list = result.varietyList;
								var innerText = "";
								for ( var no in list) {
									innerText = innerText
											+ " <label class='checkbox-inline'> <input type='checkbox' class='pet_variety' name='varietys' value=\""
											+ list[no].varietyName + "\">"
											+ list[no].varietyName
											+ " </label>";
								}
								innerText = innerText
										+ "<button type='button' class='btn' onclick='cleanVarietys()'>清空品种筛选</button>";
								$("#pet_varietys").html(innerText);
							} else {
								loadVarietysError();
							}
						},
						error : function() {
							loadVarietysError();
						}
					});
		}
		function loadVarietysError() {
			$(".modal-body").html("获取宠物品种失败");
			$("#topModal").modal("show");
			$("#pet_varietys")
					.html(
							"<button type='button' class='btn btn-info' onclick='loadVarietys()'>重新加载</button>");
		}

		function cleanVarietys() {
			var checkboxs = document.getElementsByClassName("pet_variety");
			for ( var no = 0; no < checkboxs.length; no++) {
				checkboxs[no].checked = false;
			}
		}
		function changeConditions() {
			var lowPrice = document.getElementById("lowPrice").value;
			var highPrice = document.getElementById("highPrice").value;
			var reg = /^[0-9]*(\.\d{1,2})?$/;
			if (!reg.test(lowPrice) || !reg.test(highPrice)) {
				$(".modal-body").html("请输入正确格式价格，价格精确到小数点后两位");
				$("#topModal").modal("show");
				return;
			}
			if (parseFloat(lowPrice) > parseFloat(highPrice)) {
				$(".modal-body").html("请输入正确的价格区间！");
				$("#topModal").modal("show");
				return;
			}
			search();
		}
		function prePage() {
			var now = parseInt($('#pageIndex').val());
			if(now ==1){return;}
			$('#nowPage').html(now-1);
			$('#pageIndex').val(now-1);
			search();
		}
		function nextPage() {
		var now = parseInt($('#pageIndex').val());
			if($('#totalNum').val()<=now*$('#numIndex').val()){return;}
			$('#nowPage').html(now+1);
			$('#pageIndex').val(now+1);
			search();
		}

		function search() {
			var formdata = $("#conditions_form");
			$
					.ajax({
						url : "pet/listPetByConditions.do",
						data : formdata.serialize(),
						success : function(result) {
							console.log(result);
							if (result.msg == 'success') {
								var list = result.petList;
								var total= result.total;
								$('#totalNum').val(total);
								if (list.length == 0) {
									$("#pet_list")
											.html(
													"<h1><label class='label label-primary'>还没有您想要的宠物哦，减少筛选条件试试吧</label></h1>");
								} else {
									var innerText = "";
									for ( var no in list) {
										if (list[no].icon == null
												|| list[no].icon == "") {
											list[no].icon = "images/pet_icon.jpg";
										}
										if (list[no].price == null
												|| list[no].price < 0.009) {
											list[no].price = "免费";
										}
										innerText = innerText
												+ " <div class='col-sm-3'> <div class='thumbnail' style='cursor:pointer' onclick = 'findPet("
												+ list[no].id
												+ ")'><img style='height: 200px;width: 180px' src='"
											+list[no].icon+"' alt='"+list[no].title
											+"'  class='img-responsive' onerror=\"this.src='images/pet_icon.jpg'\"><div class='caption'><h4>￥"
												+ list[no].price + "</h4><p>"
												+ list[no].title
												+ "</p></div></div></div>";
									}
									$("#pet_list").html(innerText);
								}
							} else {
								changeConditionsError();
							}
						},
						error : function() {
							changeConditionsError();
						}
					});
		}

		function changeConditionsError() {
			$(".modal-body").html("加载宠物列表失败");
			$("#topModal").modal("show");
			$("#pet_list")
					.html(
							"<button type='button' class='btn btn-info' onclick='changeConditions()'>重新加载</button>");

		}
		function findPet(pet_id) {
			window.open("pet/showPetDetail.do?id=" + pet_id);
		}
	</script>
</body>
</html>